<?php
// 初始化游戏棋盘数据
$boardSize = 8;
$tileTypes = 8;
$board = [];
$tiles = [];

// 生成足够数量的图块
for ($i = 1; $i <= $tileTypes; $i++) {
    for ($j = 0; $j < 2; $j++) {
        $tiles[] = $i;
    }
}

// 打乱图块顺序
shuffle($tiles);

// 填充棋盘
$index = 0;
for ($i = 0; $i < $boardSize; $i++) {
    $row = [];
    for ($j = 0; $j < $boardSize; $j++) {
        @$row[] = $tiles[$index++];
    }
    $board[] = $row;
}
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>连连看游戏</title>
    <style>
        table {
            border-collapse: collapse;
        }

        td {
            width: 50px;
            height: 50px;
            border: 1px solid #000;
            text-align: center;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <table id="game-board">
        <?php
        foreach ($board as $i => $row) {
            echo '<tr>';
            foreach ($row as $j => $tile) {
                echo '<td data-row="' . $i . '" data-col="' . $j . '" data-tile="' . $tile . '">' . $tile . '</td>';
            }
            echo '</tr>';
        }
        ?>
    </table>

    <script>
        const board = document.getElementById('game-board');
        let firstTile = null;

        board.addEventListener('click', function (event) {
            if (event.target.tagName === 'TD') {
                const tile = event.target;
                if (firstTile === null) {
                    firstTile = tile;
                    tile.style.backgroundColor = 'yellow';
                } else {
                    const row1 = parseInt(firstTile.dataset.row);
                    const col1 = parseInt(firstTile.dataset.col);
                    const row2 = parseInt(tile.dataset.row);
                    const col2 = parseInt(tile.dataset.col);
                    const tile1Type = parseInt(firstTile.dataset.tile);
                    const tile2Type = parseInt(tile.dataset.tile);

                    if (tile1Type === tile2Type && canConnect(row1, col1, row2, col2)) {
                        firstTile.textContent = '';
                        tile.textContent = '';
                        firstTile.style.backgroundColor = '';
                        firstTile.dataset.tile = 0;
                        tile.dataset.tile = 0;
                    } else {
                        firstTile.style.backgroundColor = '';
                    }
                    firstTile = null;
                }
            }
        });

        function canConnect(row1, col1, row2, col2) {
            // 简单判断：这里仅实现无折线连接，可根据需求扩展为支持折线连接
            if (row1 === row2) {
                let minCol = Math.min(col1, col2);
                let maxCol = Math.max(col1, col2);
                for (let col = minCol + 1; col < maxCol; col++) {
                    const cell = board.rows[row1].cells[col];
                    if (parseInt(cell.dataset.tile) !== 0) {
                        return false;
                    }
                }
                return true;
            } else if (col1 === col2) {
                let minRow = Math.min(row1, row2);
                let maxRow = Math.max(row1, row2);
                for (let row = minRow + 1; row < maxRow; row++) {
                    const cell = board.rows[row].cells[col1];
                    if (parseInt(cell.dataset.tile) !== 0) {
                        return false;
                    }
                }
                return true;
            }
            return false;
        }
    </script>
</body>

</html>